<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Document</title>
    <script src='../js/vue.js'></script>
    <style>
        .basic {
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }

        .normal {
            background-color: aquamarine;
            font-size: 10px;
        }

        .happy {
            background-color: red;
            font-size: 20px;
        }

        .sad {
            background-color: bisque;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id='root'>
        <div class="basic" :class="mood" @click="changeMood">{{city}}</div>
        <br>
        <!-- 适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr">{{city}}</div>

        <!-- 适用于：要绑定的样式个数确定，名字也确定,但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{city}}</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                city: "北京",
                mood: 'normal',
                classArr: ['happy', 'sad', 'normal'],
                classObj: {
                    happy: false,
                    sad: false
                }
            }, methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal'];
                    const index = Math.floor(Math.random() * 3);
                    this.mood = arr[index];
                },
            },
        });
    </script>
</body>

</html>